<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-type-contents ddp-resize2 ddp-type2">
  <!-- 닫기 버튼 -->
  <a href="javascript:" class="ddp-btn-close" (click)="close()"></a>
  <!-- //닫기 버튼 -->
  <div class="ddp-icon-name">
    <div class="ddp-ui-name2 ddp-type3">
      {{'msg.storage.ui.dsource.create.title' | translate}} ({{'msg.storage.ui.dsource.create.db.title' | translate}})
      <span class="ddp-txt-info">{{'msg.storage.create-dsource.db.sub.title' | translate}}</span>
      <em class="ddp-bg-order-line5-type"></em>
    </div>
  </div>
  <!-- import -->
  <div class="ddp-type-contents-in ddp-type ddp-scroll">
    <!-- dp connection -->
    <div class="ddp-ui-dbconnect">
      <!-- ingestion type -->
      <div class="ddp-wrap-edit3 ddp-type">
        <label class="ddp-label-type ddp-bold">{{'msg.storage.th.ingestion_type' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option">
          <div class="ddp-inline">
            <label class="ddp-label-radio" *ngFor="let type of ingestionTypeList" (change)="onChangeIngestionType(type)">
              <input type="radio" [checked]="selectedIngestionType.value === type.value">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{type.label}}</span>
            </label>
          </div>
        </div>
        <!-- //edit option -->
      </div>
      <!-- //ingestion type -->
      <div class="ddp-edit-setting ddp-type">
        <!-- preset box -->
        <div class="ddp-wrap-edit3 ddp-type ddp-mgt0">
          <label class="ddp-label-type ddp-bold ">{{'msg.storage.ui.db.connection' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option ">
            <component-paging-search-select
              (onSelected)="onSelectedConnectionPreset($event)"
              (onLoadPage)="onScrollPage($event)"
              [defaultIndex]="getConnectionDefaultIndex()"
              [array]="connectionPresetList"
              [isEnableObjectKey]="true"
              [objectKey]="'name'"
              [pageNum]="pageResult.number"
              [usePlaceholder]="true"
              [isConnection]="true"
              [unselectedMessage]="'msg.storage.ui.load.dconn' | translate">
            </component-paging-search-select>
          </div>
          <!-- //edit option -->
        </div>
        <!-- //preset box -->
        <app-connection [isDisableChangeConnectionType]="!selectedConnectionPreset.default"
                        [isDisableChangeConnectionInfo]="!selectedConnectionPreset.default"
                        [isDisableProperties]="true"
                        [isHideConnectionLabel]="true"
                        [isShowDialogGuide]="true"></app-connection>
      </div>
    </div>
    <!-- //dp connection -->
  </div>
  <!-- //import -->
  <!-- buttons -->
  <div class="ddp-ui-buttons">
    <a href="javascript:" class="ddp-btn-type-popup" (click)="close()">{{'msg.comm.btn.cancl' | translate}}</a>
    <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black" (click)="next()">{{'msg.comm.btn.next' | translate}}</a>
  </div>
  <!-- //buttons -->
</div>
